<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="Utils\sylvester.js"></script>
<script type="text/javascript" src="Utils\glUtils.js"></script>
<script type="text/javascript">
function log(s) { $("#log").append(s + "<br>"); }

// our global context reference; we only have one canvas and one context,
// so we don't have to keep passing this around
var gl;

// we'll read the width and height from the canvas object
var canvasWidth, canvasHeight;

// an object we'll use to store shaders, textures, etc. on as we create them
var userData = { };

function loadShader(shaderType, shaderSource)
{
    // Create the shader object
    var shader = gl.createShader(shaderType);
    if (shader == 0)
	return 0;

    // Load the shader source
    gl.shaderSource(shader, shaderSource);

    // Compile the shader
    gl.compileShader(shader);

    // Check the compile status
    if (!gl.getShaderi(shader, gl.COMPILE_STATUS)) {
        alert(gl.getShaderInfoLog(shader));
        return null;
    }

    return shader;
}
var va;
function init()
{
    // Grab the canvas object and its dimensions
    var canvas = document.getElementById("c");
    canvasWidth = canvas.width;
    canvasHeight = canvas.height;

    // Request a moz-glweb20 rendering context from the canvas, and
    // store it in the gl global
    gl = canvas.getContext("moz-webgl");
    if (!gl) {
	// failed to get the context
	log("Failed to get moz-glweb20 context!");
	return false;
    }

    // put our shader source in variables; see later examples
    // for a more efficient way to do this within HTML.
    var vertexShaderSource = 
	"attribute vec4 vPosition;     \n" +
	"void main()                   \n" +
	"{                             \n" +
	"  gl_Position = vPosition;    \n" +
	"} ";
    var fragmentShaderSource =
	"/*precision mediump float;*/  \n" +
	"void main()                   \n" +
	"{                             \n" +
	"  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); \n" +
	"} ";

    // create our shaders
    var vertexShader = loadShader(gl.VERTEX_SHADER, vertexShaderSource);
    var fragmentShader = loadShader(gl.FRAGMENT_SHADER, fragmentShaderSource);

    if (!vertexShader || !fragmentShader)
	return false;

    // Create the program object
    var programObject = gl.createProgram();
    if (programObject == 0)
	return false;

    // Attach our two shaders to the program
    gl.attachShader (programObject, vertexShader);
    gl.attachShader (programObject, fragmentShader);

    // Bind "vPosition" to attribute 0
    //gl.bindAttribLocation (programObject, 0, "vPosition");

    // Link the program
    gl.linkProgram (programObject);

    va = gl.getAttribLocation(programObject, "vPosition");
    userData.programObject = programObject;
    gl.useProgram(programObject)
    // set up the clear color to clear to transparent black
    gl.clearColor (0, 0, 0, 1);

    return true;
}

// Actually draw the triangle, using the program created in init()
var vertices = [  0.0,  0.5,  0.0,-0.5, -0.5,  0.0,0.5, -0.5,  0.0  ];
function draw()
{

    // Set up the viewport
    gl.viewport(0, 0, canvasWidth, canvasHeight);

    // Clear the color buffer
    gl.clear(gl.COLOR_BUFFER_BIT);

    // Use the program object we created in init()
    gl.useProgram(userData.programObject);


    // set up the vbos
    var buffers = { };
    buffers.position = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
    gl.bufferData(gl.ARRAY_BUFFER, new CanvasFloatArray(vertices), gl.STATIC_DRAW);
    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
    // Load the vertex data
    // XXX we seem to have lost the |normalized| and |stride| params!
    gl.vertexAttribPointer(va, 3, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(va);

 
    // Do the draw, as triangles
    gl.drawArrays(gl.TRIANGLES, 0, 3);

    // Finally do the swap to display what we just drew
    //gl.swapBuffers();
}

function main() 
{
    if (!init())
	return;

    // our scene is static, so we only need to draw once
    draw();

    log("Finished.");
}

// Use jQuery to get a callback for when the page has loaded and we can interact
// with it; the same could be accomplished with an explicit event listener for
// the load event.
$(document).ready(main);

</script>

<style type="text/css">
canvas {
  border: 1px solid gray;
}
</style>
</head>

<body>
  <div style="text-align: center">
    <!-- this is the canvas that we render to -->
    <canvas id="c" width="320" height="240"></canvas>

    <!-- a convenient div to use to display log messages -->
    <div id="log" style="text-align: center"></div>
  </div>
</body>
</html>
